<template>
  <v-container class="d-flex ga-4">
    <template v-for="item in list" :key="item.title">
      <!-- 有下拉子菜单 -->
      <v-menu v-if="item.item" offset-y origin="top left" rounded="md" elevation="8" style="border-radius: 12px;">
        <template v-slot:activator="{ props }">
          <v-btn v-bind="props" variant="text" class="menu-btn">
            <v-icon v-if="item.icon" class="me-1" size="20">{{ item.icon }}</v-icon>
            {{ item.title }}
          </v-btn>
        </template>
        <v-list dense class="py-1">
          <v-list-item v-for="sub in item.item" :key="sub.title" :href="sub.link" target="_blank">
            <v-list-item-title class="menu-title">{{ sub.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      <!-- 只有 path 的，直接渲染 a 标签 -->
      <a v-else-if="item.path" :href="item.path" class="v-btn v-btn--variant-text menu-btn"
        style="display: flex; align-items: center; text-decoration: none; color: inherit;">
        <v-icon v-if="item.icon" class="me-1" size="20">{{ item.icon }}</v-icon>
        {{ item.title }}
      </a>
    </template>
    <!-- <ThemeToggle /> -->
  </v-container>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { watchEffect } from 'vue'
import { useTheme } from 'vuetify'

interface nav {
  icon?: string
  title: string
  path?: string
  link?: string
  item?: nav[]
}

const list: nav[] = [
  { icon: 'mdi-home', title: '首页', path: '/boke' },
  {
    icon: 'mdi-folder',
    title: '项目',
    item: [
      { title: '药易寻', link: 'https://www.zyysjk.xyz/' },
      { title: 'Ocean Chat - Spring Boot', link: 'https://gitee.com/yyt363045841/oceanchat' },
      { title: 'Ocean Chat - Vue3', link: 'https://gitee.com/yyt363045841/ocean-chat-vue' }
    ]
  }
]

// 同步 VitePress 暗黑模式到 Vuetify
const { isDark } = useData()
const { change } = useTheme()
watchEffect(() => {
  change(isDark.value ? 'dark' : 'light')
})
</script>

<style scoped>
/* 统一菜单按钮和下拉菜单项的字体大小为14px */
.menu-btn {
  font-size: 14px !important;
}

.menu-title {
  font-size: 14px !important;
}

:deep(.v-overlay__content .v-list) {
  background-color: rgba(255, 255, 255, 0.05) !important;
  /* 透明度可按需调整 */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
}


:deep(.v-overlay__content) {
  border-radius: 12px !important;
  border-top-left-radius: 0px !important;
}
</style>
